<template>
	<div class="newsongrecommend">
		<!-- 固定在顶部的内容 -->
		<div class="nav-fd">
			<div class="get-App ">
				下载App
			</div>
			<div class="serch-logo ">
				<van-icon name="search" size="0.775rem" />
			</div>
		</div>
		<!-- 歌曲内容 -->
		<div class="music-information">
			<!-- 歌名部分 -->
			<div class="music-title">
				<p class="name">
					<span class="icon">
						标准
						<van-icon name="arrow-down" />
					</span>
					<span class="song">{{infogm}}</span>
				</p>
				<p class="name">{{infogmname}}</p>
			</div>
			<!-- 歌词部分 -->
			<div class="music-lyric van-picker-gai">
				<van-picker :columns="columns"  class="van-picker__mask-gai"/>
			</div>
			<!-- 小功能部分 -->
			<div class="music-func">
				<p class="content">
					<van-icon name="like-o paing" />
					<van-icon name="chat-o paing" />
					<van-icon name="back-top" class="back-top paing" />
				</p>
			</div>
			<!-- 播放按键 -->
			<div class="music-play">
				<audio :src="singsong" controls="controls" class="palyar">
				</audio>
			</div>
			<!-- 功能广告2 -->
			<div class="music-func2 dp-fl">
				<div class=" public-frame">高品质下载</div>
				<div class=" public-frame">手机铃声设置</div>
			</div>
		</div>
		<!-- 所属专辑 -->
		<div class="album">
			<div class="title">
				所属专辑
			</div>
			<van-divider />
			<div class="content-a">
				<div class="fl-le title-img">
					<img :src="img1" >
				</div>
				<div class="fl-le title-font">
					<p>{{infogm}}<span>{{math1}}</span></p>
					<p>{{time}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="arrow" />
				</div>
			</div>
			<van-divider />
			<div class="song-sheet">
				<div class="fl-le title-font">
					<p>{{infogm}}</p>
					<p>{{infogmname}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="back-top" />
				</div>
			</div>
		</div>
		<!-- 所属歌手 -->
		<div class="singer">
			<div class="title">
				所属歌手
			</div>
			<van-divider />
			<div class="content-a">
				<div class="fl-le title-img">
					<img :src="img2" >
				</div>
				<div class="fl-le title-font">
					<p>{{infogmname}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="arrow" />
				</div>
			</div>
			<van-divider>歌手其他热门专辑</van-divider>
			<van-swipe :loop="false" :width="120" :height="180" :show-indicators='false'>
				<van-swipe-item v-for="item,index in img3">
					<div class="album-module">
						<div class="module-img">
							<img :src="item.src" class="img">
						</div>
						<p class="name">{{item.name}}</p>
						<p class="time">{{item.time}}</p>
					</div>
				</van-swipe-item>
			</van-swipe>
		</div>
		<!-- 结尾 -->
		<div class="footer">
			<div class="img">
				<img :src="img4">
			</div>
			<div class="font">打开APP，找到更好听的哥</div>
		</div>
		
		
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				math1:'(1首)',
				time:'2020-10-23',
				infogm:'Dance By Myself (Retro Rock Band Ver.)',
				infogmname:'뉴튼',
				columns: ['*该歌词暂不支持自动滚动*',
				'Think I got a fever',
				'I be sweating so much',
				'it s so nice to meet ya',
				'wish I had a hold of my body',
				'cause it s feeling like you re in control now',
				'I can only move my feet, yeah the rest is in protest',
				'Oh you must be a miracle',
				'I never seen somebody move like you',
				'In the zone',
				'Like you know exactly what to do',
				'to get me going',
				'All I need is a closer look, closer look',
				'And the lights moving slow',
				'with the bass in the back',
				'I see your eyes slowly close',
				'and your lips, they open',
				'I m leaning in for a kiss but then you whisper',
				'"Don t make me dance by myself"',
				'Said I don t really dance well',
				'"Don t make me dance by myself"',
				'well, don t want you dancing with someone else',
				'I won t make you dance by yourself',
				'Think I feel better then I ever felt',
				'But don t make me dance by myself',
				'Don t wanna dance with anyone else',
				'Put it on the line for you babe',
				'Must be out my mind, guess I m crazy',
				'But I don t wanna spend the night thinking maybe',
				'If I coulda, shoulda tried would you take me?',
				'Ooh, I must be hypnotized',
				'I m sure you put a spell on me',
				'Paralyzed, oh I can only move my feet',
				'Take ya time,',
				
				
				],
				singsong:require('../assets/music/张韶涵-梦里花.mp3'),
				img1:require('../assets/songerimg/ChAKEV-RYpmAKYpZAHFmtqv3CBs231.jpg'),
				img2:require('../assets/songerimg/ChR45V7wdm2AKyknADbXe9AaWPM833.jpg'),
				img3:[
					{src:require('../assets/songerimg/ChR45F74gPGAWgtyAABbhcLi0vs498.jpg'),name:'Dance By Myself',time:'2020-06-06'},
					{src:require('../assets/songerimg/ChR45V7wjv-AHC-FACXfrWD-QoI125.jpg'),name:'Apple 2020 (feat. 서가영 of 간첩소녀)',time:'2020-02-27'},
					{src:require('../assets/songerimg/ChR45F73RH-AWzH_ADk25E9DTs4399.jpg'),name:'The Law Of Gravity',time:'2020-04-10'},
					{src:require('../assets/songerimg/ChAKEV-pD6OAAtDRAEeyDQs3pHs089.jpg'),name:'Disco Nights',time:'2020-11-10'},
					{src:require('../assets/songerimg/ChR45F73RH-AWzH_ADk25E9DTs4399.jpg'),name:'The Law Of Gravity (Acoustic Ver.)',time:'2020-05-07'},
					{src:require('../assets/songerimg/ChAKEl_IvLWAJMEOAIvKcsqENo8390.jpg'),name:'뉴튼의 3법칙 (Laws of Motion)',time:'2020-12-04'},
					
				
				],
				img4:require('../assets/homepage1/99e28d0.png'),
			}
		},
	}
</script>

<style scoped>
*{
	box-sizing: border-box;
}
.newsongrecommend{
	background-color: #eee;
}
	/* 固定在顶部的内容开始 */
.dp-fl{
	display: flex;
	justify-content: center;
}
.fl-le{
	float: left;
}
.fl-ri{
	float: right;
}
.nav-fd{
	position: fixed!important;
	background: url(../assets/homepage1/df8724c.jpg) no-repeat;
	width: 100%;
	height: 21.74vw;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	z-index: 200;
	border-bottom: .5px solid #e0e0e0;
}
.get-App{
	padding: 0.2rem 0.175rem;
	width: 1.7rem;
	text-align: center;
	background: #e61723;
	color: #fafafa;
	font-style: normal;
}
.serch-logo{
	padding: .65rem;
}
.pd-le{
	padding-left: 0.625rem;
}
/* 固定在头部的内容结束 */
/* 歌名内容 */
.music-information{
	padding-top: 2.5rem;
	padding-left: .25rem;
	padding-right: .25rem;
	background: #f8f8f8;
}
.music-title{
	width: 100%;
}
.music-title .name{
	padding-bottom:0.1rem ;
	text-align: center;
	font-weight: 100;
	font-size: 0.25rem;
}
.music-title .name .icon{
	border: 1px solid #000000;
	padding: 0.0625rem 0.125rem;
	border-radius: 0.15rem;
	zoom: .7;
	font-weight: 700;
	font-size: .3rem;
}
.music-title .name .song{
	font-size: .45rem;
	font-weight: 700;
}
/* 歌词部分 */
.van-picker__mask{
	background-image: none !important;
}
.van-picker{
	background-color: #f8f8f8!important;
	opacity: .5;
	font-size: 0.3125rem;
}
.van-ellipsis{
	font-size: .4rem;
}
/* 功能部件 */
.music-func{
	width: 100%;
	height: 1.5rem;
	line-height: 1.5rem;
}
.music-func .content{
	text-align: center;
	zoom: 2;
}
.music-func .content .paing{
	padding: 0 .45rem;
	opacity: .6;
}
.music-func .content .back-top{
	transform: rotate(180deg);
}
/* 播放按键 */
.music-play{
	width: 100%;
}
.palyar{
	width: 100%;
	border: none;
	
}
.music-func2{
	width: 100%;
	height: 1.75rem;
	align-items: center;
}
.public-frame{
	width: 3.25rem;
	height: .95rem;
	background: #e13228;
	border-radius: 0.625rem;
	color: white;
	text-align: center;
	line-height: .95rem;
	margin: .25rem;
}
/* 所属专辑 */
.album{
	width: 100%;
	padding: .5rem .5rem;
	background: #f8f8f8;
	margin-top: 0.225rem;
}
.album .title{
	width: 100%;
	height: 1rem;
	font-size: .55rem;
}
.album .content-a{
	width: 100%;
	height: 2rem;
}
.album .content-a .title-img img{
	width: 1.75rem;
	height: 1.75rem;
}
.album .content-a .title-font{
	padding-left: 0.425rem;
}
.album .content-a .title-font p:nth-child(1){
	font-size: .45rem;
	padding-top: .35rem;
}
.album .content-a .title-font p:nth-child(2){
	opacity: .5;
}
.album .content-a .title-font p span{
	font-size: 0.0625rem;
}
.album .content-a .title-icn{
	height: 1.75rem;
	line-height: 1.75rem;
	zoom: 1.3;
}
.album .song-sheet{
	width: 100%;
	height: 2rem;
}
.album .song-sheet .title-font{
	height: 2rem;
}
.album .song-sheet .title-font p:nth-child(1){
	font-size: .45rem;
	padding-top: .35rem;
}
.album .song-sheet .title-font p:nth-child(2){
	opacity: .5;
}
.album .song-sheet .title-icn{
	height: 1rem;
	line-height: 1rem;
	transform: rotate(180deg);
	zoom: 1.6;
	opacity: .5;
}
.singer{
	width: 100%;
	padding: .5rem .5rem;
	background: #f8f8f8;
	margin-top: 0.225rem;
}
.singer .title{
	width: 100%;
	height: 1rem;
	font-size: .55rem;
}
.singer .content-a{
	width: 100%;
	height: 1.25rem;
}
.singer .content-a .title-img{
	width: 1.25rem;
}
.singer .content-a .title-img img{
	width: 100%;
	border-radius: 50%;
}
.singer .content-a .title-font{
	height: 1.25rem;
	line-height: 1.25rem;
	padding-left: .25rem;
}
.singer .song-sheet .title-font p{
	font-size: .45rem;
	padding-top: .35rem;
}
.singer .content-a .title-icn{
	height: 1.25rem;
	line-height: 1.25rem;
	zoom: 1.3;
}
/* 其他专辑模块 */
.album-module{
	display: flex;
	align-items: center;
	flex-direction: column;
	padding-right: .25rem;
}
.album-module .module-img{
	width: 100%;
}
.album-module .module-img img{
	width: 100%;
}
.album-module .name{
	font-weight: 700;
}
.album-module .time{
	font-size: 0.15rem;
	opacity: .8;
}
.footer{
	width: 100%;
	padding: 50px 0;
	/* height: 3.5rem; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: white;
	margin-top: 0.225rem;
}
.footer .img img{
	width: 3rem;
}
.footer .font{
	width: 5.25rem;
	height: 1rem;
	background-color: #E13228;
	color: white;
	border-radius: 2.125rem;
	text-align: center;
	line-height: 1rem;
	margin-top: .225rem;
}
</style>
